<template>
  <div class="HeaderBox">
    <div class="content">
      <div style="height:100%;width: 20%;">
        <div class="supervision-left-top" style="cursor: pointer;" @click="gohome">
          <img src="@/assets/img/townPreview/回到首页.png" alt="">
          <span>回到首页</span>
        </div>
        <div class="headLeft">
          <div class="headLeftTitle"><span>职能办公室项目数量</span></div>
          <div class="headLeftChar">
            <div
              v-for="(item, index) in leftList"
              :key="index"
              class="headLeftBtn"
            >
              <div style="height:80%">
                <span>{{ item.title }}</span>
                <div style="height:70%;display: flex;align-items: center;">
                  <dv-percent-pond
                    :key="item.id"
                    :config="item"
                    style="width:100%;height:80%;"
                  />
                  <span class="spanValue">{{ item.value }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="headMid">
        <div class="headMidTop">
          <div class="titleTop">柯桥e码通驾驶舱-乡财大脑</div>
          <div class="headMidBox">
            <div class="headMidcon">
              <div
                v-for="(it, index) in midTopList"
                :key="index"
                class="btnMid"
                :style="
                  `left:${it.left};top:${it.top};transform: translateX(${
                    it.x
                  });`
                "
              >
                <span>{{ it.num }}</span>
                <p>{{ it.title }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="headMidBot">
          <div class="headMidBotTitle">
            <span>银行帐</span>
            <span>总存款：223867.51(万元)</span>
          </div>
          <div class="headMidBotChar">
            <VEcharts
              v-if="optsLeft"
              autoresize
              :options="optsLeft"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </div>
      <div class="headRight">
        <div class="headRightTop">
          <div class="headRightTopTitle">
            <span>财政总收支</span>
          </div>
          <div class="headRightTopChar">
            <VEcharts
              v-if="optsBingtu"
              autoresize
              :options="optsBingtu"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
        <div class="headRightBot">
          <div class="headRightBotTitle">
            <span>一事一议</span>
          </div>
          <div class="headRightBotTable">
            <el-table
              ref="table"
              :header-cell-style="{
                color: '#32c5ff',
                background: '#58a3e0',
                textAlign: ' center',
                height: '50px'
              }"
              :data="tableData"
              :cell-style="{
                color: '#32c5ff',
                textAlign: 'center',
                fontSize: '12px'
              }"
              style="width: 100%;border-radius: 8px;"
              height="93%"
            >
              <el-table-column prop="PROGRAMNAME" label="项目名称" />
              <el-table-column prop="MONEY1" label="金额" />
              <el-table-column prop="MONEY2" label="拨付数" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';
import * as echarts from 'echarts';

export default {
  components: {
    VEcharts
  },
  data() {
    return {
      midTopList: [
        {
          num: 54,
          title: '财政办公人员',
          left: '50%',
          top: '5%',
          x: '-50%'
        },
        {
          num: 12,
          title: '乡财乡管',
          left: '4%',
          top: '34%',
          x: '0'
        },
        {
          num: 16,
          title: '乡财办公室',
          left: '82%',
          top: '34%',
          x: '0'
        },
        {
          num: 4,
          title: '乡财县管',
          left: '16%',
          top: '65%',
          x: '0'
        },
        {
          num: 191,
          title: '村居总数',
          left: '73%',
          top: '65%',
          x: '0'
        }
      ],
      tableData: [
        {
          PROGRAMNAME: '2019年度钱清街道遗风村等一事一议财政奖项目',
          MONEY1: 77.81,
          MONEY2: (77.81 * 0.75).toFixed(2)
        },
        {
          PROGRAMNAME: '2018-2019年度王坛镇舜皇等村一事一议财政奖补项目',
          MONEY1: 32.5,
          MONEY2: (32.5 * 0.75).toFixed(2)
        },
        {
          PROGRAMNAME: '2019年度夏履镇夏东村一事一议财政奖补项目',
          MONEY1: 15.51,
          MONEY2: (15.51 * 0.75).toFixed(2)
        },
        {
          PROGRAMNAME: '2019年度福全街道赵建村一事一议财政奖补项目',
          MONEY1: 27.44,
          MONEY2: (27.44 * 0.75).toFixed(2)
        },
        {
          PROGRAMNAME: '2020年度稽东镇陈村村级公益事业建设一事一议财政奖补项目',
          MONEY1: 80,
          MONEY2: (80 * 0.75).toFixed(2)
        },
        {
          PROGRAMNAME: '2020年度王坛镇王坛村村级公益事业建设一事一议财政奖补项目',
          MONEY1: 90,
          MONEY2: (90 * 0.75).toFixed(2)
        }
      ],
      leftList: [
        {
          value: 89,
          fullWidth: 200,
          colors: ['#1492FF'],
          title: '财政办公室',
          textColor: 'transparent',
          id: 1
        },
        {
          value: 85,
          fullWidth: 200,
          colors: ['#1492FF'],
          title: '综合信息指挥室',
          textColor: 'transparent',
          id: 2
        },
        {
          value: 72,
          fullWidth: 200,
          colors: ['#1492FF'],
          title: '经济发展办公室',
          textColor: 'transparent',
          id: 3
        },
        {
          value: 67,
          fullWidth: 200,
          colors: ['#1492FF'],
          title: '党政综合办公室',
          textColor: 'transparent',
          id: 4
        },
        {
          value: 61,
          fullWidth: 200,
          colors: ['#1492FF'],
          title: '社会事务服务管理办公室',
          textColor: 'transparent',
          id: 5
        },
        {
          value: 53,
          fullWidth: 200,
          colors: ['#1492FF'],
          title: '社会治安综合治理办公室',
          textColor: 'transparent',
          id: 6
        },
        {
          value: 47,
          fullWidth: 200,
          colors: ['#1492FF'],
          title: '党建工作办公室',
          textColor: 'transparent',
          id: 7
        },
        {
          value: 43,
          fullWidth: 200,
          colors: ['#1492FF'],
          title: '城镇建设管理办公室',
          textColor: 'transparent',
          id: 8
        },
        {
          value: 35,
          fullWidth: 200,
          colors: ['#1492FF'],
          title: '社区管理服务办公室',
          textColor: 'transparent',
          id: 9
        }
      ]
    };
  },
  computed: {
    optsLeft() {
      const newArr = {
        color: ['#5b8ff9', 'rgba(216,224,240,0.8)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        // legend: {
        //   orient: "vertical",
        //   right: "5%",
        //   top: "0%",
        //   textStyle: {
        //     // 图例文字的样式
        //     color: "#ffffff;",
        //     fontSize: 12
        //   }
        // },
        grid: {
          top: '16%',
          left: '6%',
          right: '6%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: {
          axisLabel: {
            // interval: 0,
            // rotate: 25,
            fontSize: 16
          },
          type: 'category',
          data: ['财政账', '政府账', '事业单位账', '公司账', '其他账'],
          axisLine: {
            lineStyle: {
              color: '#32c5ff'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            // 网格线
            show: false
          }
        },
        series: [
          {
            name: '个数',
            type: 'bar',
            // stack: 'total',
            // barMaxWidth: "50",
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#5b8ff9'
                  },
                  {
                    offset: 1,
                    color: 'rgba(91,143,249,0.00)'
                  }
                ]),
                label: {
                  show: true, // 是否显示
                  position: 'top', // 显示位置
                  textStyle: {
                    // 文字样式
                    color: '#1fd2ff',
                    fontSize: '15'
                  }
                  // formatter: function(params) {
                  //   // 核心部分 formatter 可以为字符串也可以是回调
                  //   if (params.value) {
                  //     // 如果当前值存在则拼接
                  //     return `%`;
                  //   } else {
                  //     // 否则返回个空
                  //     return "0%";
                  //   }
                  // }
                }
              }
            },
            data: [36, 35, 35, 77, 61]
          }
        ]
      };
      return newArr;
    },
    optsBingtu() {
      const newArr2 = {
        // title: {
        //   text: "税种组成",
        //   left: "center"
        // },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '4%',
          bottom: '10%',
          textStyle: {
            // 图例文字的样式
            color: '#1fd2ff',
            fontSize: 12
          }
        },
        series: [
          {
            name: '项目分类',
            type: 'pie',
            radius: '70%',
            data: [{ name: '1', value: 5 }, { name: '2', value: 1 }],
            label: {
              show: true,
              // position: "inner",
              formatter: function(params) {
                return params.value;
              },
              textStyle: {
                color: '#faad14',
                fontSize: 20
              }
            },
            center: ['40%', '40%'],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            color: ['rgba(90,216,166,0.85)', 'rgba(91,143,249,0.85)']
          }
        ]
      };
      return newArr2;
    }
  },
  mounted() {
    this.pieOutlineFunc();
  },
  methods: {
    pieOutlineFunc() {
      var _this = this;
      window.addEventListener('resize', function(e) {
        _this.$nextTick(() => {
          _this.leftList.forEach(item => {
            item.id + 9;
          });
        });
      });
    },
    gohome() {
      this.$router.push('/');
    }
  }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.supervision-left-top {
  border: 1px solid #1fd2ff;
  color: #1fd2ff;
  border-radius: 9px;
  padding: 5px 25px;
  height: 34px;
  text-align: center;
  img {
    vertical-align: middle;
  }
  span {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
  }
}
.HeaderBox {
  background: url("~@/assets/img/headerPage/背景.png") no-repeat;
  background-size: 100% 100%;
  height: 100%;
  padding: px2vw(23px);
}
.content {
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.headLeft {
  margin-top: 10px;
  height: calc(100% - 45px);
  background: url("~@/assets/img/headerPage/矩形left.png") no-repeat;
  background-size: 100% 100%;
  .headLeftTitle {
    height: 6%;
    display: flex;
    align-items: center;
    padding-left: 10%;
    span {
      font-size: px2vw(18px);
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #1fd2ff;
    }
  }
  .headLeftChar {
    height: 94%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    .headLeftBtn {
      height: 10%;
      width: 100%;
      padding: 0 px2vw(22px);
      span {
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
      }
      .spanValue {
        margin-left: 5px;
        font-size: px2vw(20px);
        font-family: LiquidCrystal, LiquidCrystal-Regular;
        color: #f6bd16;
      }
    }
  }
}
.headMid {
  width: 55%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .headMidTop {
    height: 70%;
    .titleTop {
      color: #1fd2ff;
      font-size: px2vw(32px);
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      height: 45px;
    }
    .headMidBox {
      height: calc(100% - 45px);
      display: flex;
      justify-content: center;
      align-items: center;
      .headMidcon {
        width: 88%;
        height: 100%;
        position: relative;
        .btnMid {
          width: px2vw(117px);
          height: px2vw(117px);
          position: absolute;
          background: url("~@/assets/img/headerPage/qiu.png") no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            font-size: px2vw(44px);
            font-family: LiquidCrystal, LiquidCrystal-ExtraBold;
            font-weight: ExtraBold;
            color: #f6bd16;
            text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
          }
          p {
            position: absolute;
            margin: 0;
            left: 0;
            bottom: -25%;
            height: px2vw(36px);
            font-size: px2vw(28px);
            font-family: zcool, zcool-Regular;
            font-weight: 400;
            color: #ffffff;
            text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5),
              0px 1px 0px 0px #21cffa inset;
            white-space: nowrap;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
  }
  .headMidBot {
    height: 30%;
    background: url("~@/assets/img/headerPage/矩形Mid.png") no-repeat;
    background-size: 100% 100%;
    padding-top: 20px;
    .headMidBotTitle {
      height: 14%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: px2vw(18px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #1fd2ff;
      }
      span:nth-child(1) {
        margin-left: 5%;
      }
      span:nth-child(2) {
        margin-right: 5%;
      }
    }
    .headMidBotChar {
      height: 86%;
    }
  }
}
.headRight {
  width: 23%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .headRightTop {
    height: 41%;
    background: url("~@/assets/img/headerPage/矩形rightTop.png") no-repeat;
    background-size: 100% 100%;
    .headRightTopTitle {
      padding-left: 15%;
      height: 14%;
      display: flex;
      align-items: center;
      span {
        font-size: px2vw(18px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #1fd2ff;
      }
    }
    .headRightTopChar {
      height: 86%;
    }
  }
  .headRightBot {
    height: 56%;
    background: url("~@/assets/img/headerPage/矩形rightBot.png") no-repeat;
    background-size: 100% 100%;
    .headRightBotTitle {
      height: 12%;
      display: flex;
      align-items: center;
      padding-left: 15%;
      span {
        font-size: px2vw(18px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #1fd2ff;
      }
    }
    .headRightBotTable {
      height: 88%;
      padding: px2vw(5px) px2vw(20px);
    }
  }
}
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background-color: transparent;
}
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}
/deep/.el-table td,
.el-table th.is-leaf {
  border: 0;
  // border-bottom: 1px solid #32c5ff;
}
/deep/.el-table--group::after,
.el-table--border::after,
.el-table::before {
  background-color: transparent;
}
/deep/.el-table__body tr:hover > td {
  background-color: rgba(91, 143, 249, 0.35) !important;
}
/deep/.el-table__row {
  height: px2vw(54px);
}
</style>
